<template>
   <div class=
   "article-list"
   ref="list"
   @scroll="rememberScroll"
   >
     <van-pull-refresh v-model="refreshing"
     @refresh="onRefresh">
      <van-list
         :error.sync="error"
         error-text="请求失败，点击重新加载"
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
         @load="onLoad()"
      >
       <article-item
       v-for="item in list"
       :key="item.art_id"
       :article="item">
       </article-item>
      </van-list>
     </van-pull-refresh>
   </div>
 </template>

<script>
import { getArticlesByChannel } from '@/api/article'
import ArticleItem from './article-item.vue'

export default {
  name: 'ArticleList',
  props: {
    channelId: {
      type: Number,
      default: 0
    }
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      scrollTop: 0, // 默认阅读新闻滚动位置
      timestamp: Date.now(), // 时间戳
      list: [], // 列表
      error: false, // 错误信息
      loading: false, // 加载状态
      finished: false, // 完成加载
      refreshing: false// 刷新
    }
  },
  // 访问还原之前访问位置
  activated () {
    this.$refs.list.scrollTop = this.scrollTop
  },
  methods: {
    // 监听滚动位置
    rememberScroll () {
      this.scrollTop = this.$refs.list.scrollTop
    },
    async onLoad () {
      // 发请求，获取数据
      const [err, res] = await getArticlesByChannel(this.channelId, this.timestamp)
      // 如果有错误
      if (err) {
        // 错误消息提示
        this.$toast.fail('加载失败，请重试')
        // 设置错误状态 -> 显示错误效果
        this.error = true
        // 否则 -> 请求成功
      } else {
        // 追加列表数据
        this.list.push(...res.data.data.results)
        // 判断是否有下一页时间戳，若为空，也就没有更多了
        // 若有
        if (res.data.data.pre_timestamp) {
          // 记录下来，供下一页请求使用
          this.timestamp = res.data.data.pre_timestamp
          // 若没有
        } else {
          // 设置完成状态 -> 没有更多
          this.finished = true
        }
      }
      // 不管成功失败，都要结束加载操作
      this.loading = false
    },
    // 下拉刷新
    async onRefresh () {
      const [err, res] = await getArticlesByChannel(this.channelId, Date.now())
      if (err) {
        this.$toast.fail('刷新失败')
      } else {
        // console.log(res)
        this.list = res.data.data.results
        this.timestamp = res.data.data.pre_timestamp
        this.finished = false
        this.$toast.success('刷新成功')
      }
      /* // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad() */
      this.refreshing = false
    }
  }
}
</script>

 <style scoped lang="less">
 .article-list {
   height: 100%;
   overflow-y: auto;
   padding: 0 16px;
 }
 </style>
